const CracoAntDesignPlugin = require('craco-antd');
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const API_BASE_URL = '/api'
const PROXY_URL = 'http://localhost:8080'
module.exports = {
    devServer: {
        proxy: {
            [`${API_BASE_URL}`]: {
                target: PROXY_URL, // 目标服务器地址
                changeOrigin: true,
                pathRewrite: {[`^${API_BASE_URL}`]: ``}, // 如果需要重写请求路径，可以在此处配置
            },
        },
    },
    style: {
        postcss: {
            plugins: [
                require('autoprefixer'),
                require('postcss-flexbugs-fixes')
            ]
        }
    },
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].[contenthash:8].css',
                chunkFilename: '[name].[contenthash:8].chunk.css',
            }),
        ],
        configure: (webpackConfig, {env, paths}) => {
            webpackConfig.module.rules.push({
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 小于8KB的图片将被转换成 base64 格式
                            name: 'static/media/[name].[hash:8].[ext]',
                        },
                    },
                ],
            });
            webpackConfig.optimization = {
                ...webpackConfig.optimization,
                usedExports: true,
            };
            if (env === 'production') {
                webpackConfig.optimization = {
                    minimize: true,
                    minimizer: [
                        new TerserPlugin({
                            terserOptions: {
                                compress: {
                                    drop_console: true,
                                },
                            },
                            extractComments: false,
                        }),
                        new OptimizeCSSAssetsPlugin({}),
                    ],
                    splitChunks: {
                        cacheGroups: {
                            antd: {
                                test: /[\\/]node_modules[\\/](@ant-design|antd)[\\/]/,
                                name: 'antd',
                                chunks: 'all',
                                priority: 10,
                            },
                            lodash: {
                                test: /[\\/]node_modules[\\/](lodash)[\\/]/,
                                name: 'lodash',
                                chunks: 'all',
                                priority: 10,
                            },
                            default: false,
                        },
                    },
                };
            }
            return webpackConfig;
        }
    },
    plugins: [
        {
            plugin: CracoAntDesignPlugin,
            options: {
                customizeTheme: {
                    '@primary-color': '#126ee3',
                },
            },
        },
    ],
};
